<template>
  <view>
    <view class="top-box">
      <view class="avatar-box" @click="chooseAvatar">
        <image class="avatar" :src="avatar"></image>
        <image class="select-icon" src="/static/selectAvatar.svg"></image>
      </view>
    </view>
    <view class="list-container">
      <view class="item-box" hover-class="view-hover" :hover-stay-time="50" hover-stop-propagation
        @click="goto('./nickname/nickname')">
        <view class="left-box">
          昵称
        </view>
        <view class="right-box">
          <view class="text">
            {{ nickname }}
          </view>
          <image class="icon" src="/static/right.svg"></image>
        </view>
      </view>
      <view class="item-box" hover-class="view-hover" :hover-stay-time="50" hover-stop-propagation
        @click="goto('./introduction/introduction')">
        <view class="left-box">
          简介
        </view>
        <view class="right-box">
          <view class="text">
            {{ introduction }}
          </view>
          <image class="icon" src="/static/right.svg"></image>
        </view>
      </view>
      <view class="item-box" hover-class="view-hover" :hover-stay-time="50" hover-stop-propagation
        @click="goto('./gender/gender')">
        <view class="left-box">
          性别
        </view>
        <view class="right-box">
          <view class="text">
            {{ genderText }}
          </view>
          <image class="icon" src="/static/right.svg"></image>
        </view>
      </view>
      <view class="item-box" hover-class="view-hover" :hover-stay-time="50" hover-stop-propagation
        @click="goto('./height/height')">
        <view class="left-box">
          身高
        </view>
        <view class="right-box">
          <view class="text">
            {{vuex_user.height? vuex_user.height+'厘米':'未填' }}
          </view>
          <image class="icon" src="/static/right.svg"></image>
        </view>
      </view>
      <view class="item-box" hover-class="view-hover" :hover-stay-time="50" hover-stop-propagation
        @click="goto('./weight/weight')">
        <view class="left-box">
          体重
        </view>
        <view class="right-box">
          <view class="text">
            {{ vuex_user.weight?vuex_user.weight+'公斤':'必填' }}
          </view>
          <image class="icon" src="/static/right.svg"></image>
        </view>
      </view>
      <view class="item-box" hover-class="view-hover" :hover-stay-time="50" hover-stop-propagation
        @click="goto('./birthday/birthday')">
        <view class="left-box">
          出生年月
        </view>
        <view class="right-box">
          <view class="text">
            {{ vuex_user.birthday ||'必填'}}
          </view>
          <image class="icon" src="/static/right.svg"></image>
        </view>
      </view>
      <view class="item-box" hover-class="view-hover" :hover-stay-time="50" hover-stop-propagation
        @click="chooseBackgroundImg">
        <view class="left-box">
          背景图
        </view>
        <view class="right-box">
          <image class="img" :src="backgroundImg" mode="aspectFill"></image>
          <image class="icon" src="/static/right.svg"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        avatar: 'http://dummyimage.com/50x50/f2b879&text=avatar', // 头像
        nickname: '', // 昵称
        introduction: '', // 简介
        gender: 0, // 性别
        school: '', // 学校
        backgroundImg: 'http://dummyimage.com/120x90', //背景图
        height: '',
        weight: '',
        birthday: ''
      };
    },
    computed: {
      // 中文性别
      genderText() {
        let gender = this.gender
        return gender === 0 ? '女' : gender === 1 ? '男' : '必填'
      }
    },
    onShow() {
      this.refreshUserInfo()
    },
    methods: {
      // 刷新用户信息
      refreshUserInfo() {
        let vuex_user = this.vuex_user
        this.avatar = vuex_user.avatar
        this.nickname = vuex_user.nickname
        this.introduction = vuex_user.introduction
        this.gender = vuex_user.gender
        this.school = vuex_user.school
        this.backgroundImg = vuex_user.backgroundImg
        this.height = vuex_user.height
        this.weight = vuex_user.weight
        this.birthday = vuex_user.birthday
      },
      // 选择头像
      async chooseAvatar() {
        let img = await this.chooseImg(1)
        if (img) {
          try {
            uni.showLoading({
              title: '更换中',
              mask: true
            })
            let vuex_user = this.vuex_user
            let avatar = img
            const cloudPath = `${Date.now()}.jpg`
            const upload_res = await uniCloud.uploadFile({
              filePath: img,
              cloudPath,
            });
            if (upload_res.success) {
              avatar = upload_res.fileID
            }
            console.log(avatar);
            await uniCloud.callFunction({
              name: 'star-community-user',
              data: {
                flag: 2,
                data: {
                  id: vuex_user.id,
                  updateData: {
                    avatar
                  }
                }
              }
            })
            this.avatar = avatar
            vuex_user.avatar = avatar
            this.$u.vuex('vuex_user', vuex_user)
            uni.hideLoading()
            uni.showToast({
              title: '更换成功'
            })
          } catch (e) {
            uni.hideLoading()
            uni.showToast({
              title: '更换失败',
              icon: 'error'
            })
          }
        }
      },
      // 选择背景图
      async chooseBackgroundImg() {
        let img = await this.chooseImg(1)
        if (img) {
          try {
            uni.showLoading({
              title: '更换中',
              mask: true
            })
            let vuex_user = this.vuex_user
            let backgroundImg = img
            const cloudPath = `${Date.now()}.jpg`
            const upload_res = await uniCloud.uploadFile({
              filePath: img,
              cloudPath,
            });
            if (upload_res.success) {
              backgroundImg = upload_res.fileID
            }
            console.log(backgroundImg);
            await uniCloud.callFunction({
              name: 'star-community-user',
              data: {
                flag: 2,
                data: {
                  id: vuex_user.id,
                  updateData: {
                    backgroundImg
                  }
                }
              }
            })
            this.backgroundImg = backgroundImg
            vuex_user.backgroundImg = backgroundImg
            this.$u.vuex('vuex_user', vuex_user)
            uni.showToast({
              title: '更换成功'
            })
          } catch (e) {
            uni.showToast({
              title: '更换失败',
              icon: 'error'
            })
          }
        }
      },
      // 选择头像，推荐使用图片裁剪能力
      chooseImg(count, maxSize = 5) {
        return new Promise((resole, reject) => {
          uni.chooseMedia({
            count,
            mediaType: ['image'],
            sizeType: ['compressed'],
            success: (res) => {
              console.log(res);
              if (!res.tempFiles.length > 0) {
                return resole(null)
              }

              const tempFiles = res.tempFiles
              const maxSizeBytes = maxSize * 1024 * 1024 // 5MB的字节数
              const filePath = tempFiles[0].tempFilePath
              const fileSize = tempFiles[0].size

              if (fileSize > maxSizeBytes) {
                // 图片大小超过5MB，进行相应的处理
                uni.showToast({
                  title: '图片大小不能超过5MB',
                  duration: 2000
                });
              } else {
                // 图片大小符合要求，可以进行其他操作
                return resole(filePath)
              }

            },
            fail: (err) => {
              return reject(null)
            }
          });
        })
      },
      goto(url) {
        uni.navigateTo({
          url
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .top-box {
    display: flex;
    justify-content: center;
    padding: 50rpx 0;

    .avatar-box {
      position: relative;

      .avatar {
        height: 180rpx;
        width: 180rpx;
        border-radius: 50%;
      }

      .select-icon {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 60rpx;
        width: 60rpx;
      }
    }
  }

  .list-container {

    .item-box {
      box-sizing: border-box;
      padding: 30rpx;
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      border-bottom: 2rpx #dcdcdc solid;
      font-size: 30rpx;
      line-height: 1;

      .left-box {
        width: 160rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
      }

      .right-box {
        display: inline-flex;
        align-items: center;

        .img {
          flex-shrink: 0;
          height: 100rpx;
          width: 100rpx;
        }

        .text {}

        .icon {
          flex-shrink: 0;
          margin-left: 20rpx;
          height: 30rpx;
          width: 30rpx;
        }
      }
    }
  }
</style>